<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<style>
        ul{display:block;margin:0;padding:0;list-style:none;}
        li{display:block;margin:0;padding:0;list-style: none;}
        img{border:0;}
        .place{height:40px; background:url(images/righttop.gif) repeat-x;}
    .place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}
    .placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(images/rlist.gif) no-repeat right;}
    .placeul li:last-child{background:none;}
        </style>
        </head>
        <body>
        <div class="place"> <span>位置：</span>
          <ul class="placeul">
            <li><a href="index.html">首页</a></li>
            <li>公寓信息</li>
          </ul>
        </div>
    
        <div class="container-fluid" style="margin:0px;padding:0px;">
                        
                        <div class="input-group " style="width:300px; float:right; margin-top: 10px;">
                                
                                                     <input type="text" class="form-control" placeholder="房间号""/>
                                                     
                                                 
                                                     
                                                        <span class="input-group-addon btn"">   查询<i class="glyphicon glyphicon-search"></i></span>
                                                    </div>
                                                    
                                                    <div class="clearfix">
                                                    
                                                    </div>
                                                    
        <div class="panel panel-info">
                <div class="panel-heading">
                                <form action="" method="POST" class="form-inline" role="form">
                
                                                <div class="form-group">
                                                        <label for="">楼宇号:</label>
                                                        
                                                        <select name="" id="input" class="form-control" required="required">
                                                                <option value="">一号楼</option>
                                                                <option value="">二号楼</option>
                                                                <option value="">三号楼</option>
                                                                <option value="">四号楼</option>
                                  
                                                        </select>
                                                        <label for="">楼层:</label>
                                                        
                                                        <select name="" id="input" class="form-control" required="required">
                                                                <option value="">一层</option>
                                                                <option value="">二层</option>
                                                                <option value="">三层</option>
                                                                <option value="">四层</option>
                                                                <option value="">五层</option>
                                                                <option value="">六层</option>
                                  
                                                        </select>
                                                </div>
                                        
                                        </form>
                </div>
        <div class="panel-body  row" style="padding:30px 50px;">
                <div class="col-sm-3"  style="padding:10px 0px;"> 
                        <div class="text-center text-info " style="font-size:35px;"><a href="room.html"> 1001 </a></div>
                                
                             <div>   <img src="images/room.png" class="img-responsive center-block" alt="Image"></div>
                                <div  class="text-center "    style="font-size:20px;">  有床位 </div>
                                
                    
                        </div>
                <div class="col-sm-3" style="padding:10px 0px;">
                        <div class="text-center text-success " style="font-size:35px;">1002</div>
                                
                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                <div  class="text-center"  style="font-size:20px;" > 空缺</div>
                                
                    
                        </div>
                <div class="col-sm-3"  style="padding:10px 0px;">
                        <div class="text-center text-danger " style="font-size:35px;">1003</div>
                                
                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                <div  class="text-center"  style="font-size:20px;"> 满房</div>
                                
                    
                        </div>
                        <div class="col-sm-3"  style="padding:10px 0px;">
                                <div class="text-center text-danger " style="font-size:35px;">1004</div>
                                        
                                        <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                        <div  class="text-center" style="font-size:20px;" > 满房</div>
                                        
                            
                                </div>
                                <div class="col-sm-3"  style="padding:10px 0px;"> 
                                        <div class="text-center text-info " style="font-size:35px;">1005</div>
                                                
                                             <div>   <img src="images/room.png" class="img-responsive center-block" alt="Image"></div>
                                                <div  class="text-center "    style="font-size:20px;">  有床位 </div>
                                                
                                    
                                        </div>
                                <div class="col-sm-3" style="padding:10px 0px;">
                                        <div class="text-center text-success " style="font-size:35px;">1006</div>
                                                
                                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                <div  class="text-center"  style="font-size:20px;" > 空缺</div>
                                                
                                    
                                        </div>
                                <div class="col-sm-3"  style="padding:10px 0px;">
                                        <div class="text-center text-danger " style="font-size:35px;">1007</div>
                                                
                                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                <div  class="text-center"  style="font-size:20px;"> 满房</div>
                                                
                                    
                                        </div>
                                        <div class="col-sm-3"  style="padding:10px 0px;">
                                                <div class="text-center text-danger " style="font-size:35px;">1002</div>
                                                        
                                                        <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                        <div  class="text-center" style="font-size:20px;" > 满房</div>
                                                        
                                            
                                                </div>
                                <div class="col-sm-3">
                                        <div class="text-center text-info " style="font-size:35px;">1001</div>
                                                
                                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                <div  class="text-center" >有床位</div>
                                                
                                    
                                        </div>
                                <div class="col-sm-3">
                                        <div class="text-center text-danger " style="font-size:35px;">1002</div>
                                                
                                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                <div  class="text-center" > 空缺</div>
                                                
                                    
                                        </div>
                                <div class="col-sm-3">
                                        <div class="text-center text-danger " style="font-size:35px;">1002</div>
                                                
                                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                <div  class="text-center" > 满房</div>
                                                
                                    
                                        </div>
                                        <div class="col-sm-3">
                                                <div class="text-center text-danger " style="font-size:35px;">1002</div>
                                                        
                                                        <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                        <div  class="text-center" > 满房</div>
                                                        
                                            
                                                </div>
                                                <div class="col-sm-3">
                                                        <div class="text-center text-info " style="font-size:35px;">1001</div>
                                                                
                                                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                                <div  class="text-center" >有床位</div>
                                                                
                                                    
                                                        </div>
                                                <div class="col-sm-3">
                                                        <div class="text-center text-danger " style="font-size:35px;">1002</div>
                                                                
                                                                <img src="images/room.png" class="img-responsive center-block" alt="Image">
                                                                <div  class="text-center" > 空缺</div>
                                                                
                                                    
                                                        </div>
                                                </div>
        </div>
    </div>
</body>

</html>